<template>
  <section class="my_gogal">
    <div class="header_xuanchuan">
      <div class="container">
        <div class="header_annation">
          <h1 class="answer_title">开源实践问答，有问必答的社区</h1>
          <p class="desc">
            每一个问题，我们都会选择一个最优的答案。并且通过人工分类和技术专家维护问题列表，方便查找，为大家在学习路上解疑答惑。
          </p>
        </div>

        <img src="https://image.boxueio.com/swift-wtf-to-omg-avatar@2x.jpg" alt="描述信息" class="rounded-circle" />
        <div class="clear"></div>
      </div>
    </div>
    <div class="main_global_bg">
      <section class="container">
        <div class="main_content">
          <div class="question_right_con">
            <el-button type="danger" class="startqustionbtn" @click="jumpStartQuestion">我要提问</el-button>

            <div class="mod_about_teacher">
              <h3>最新公告</h3>
              <div class="answer_list">
                <ul>
                  <li>
                    <span></span>
                    <nuxt-link :to="'/about/detail/1523552231247499265'" target="_blank">开源实践问答上线</nuxt-link>
                  </li>
                  <li>
                    <span></span>
                    <nuxt-link :to="{ name: 'faquestion-howtoask' }" target="_blank">【新手提问导读】提问的艺术</nuxt-link>
                  </li>
                  <li>
                    <span></span>
                    <nuxt-link :to="'/faquestion/detail/1481862372760240130'" target="_blank"
                      rel="nofollow noopener noreferrer">欢迎大家的建议和反馈</nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="content_left">
            <div class="faqustion-top-group">
              <ul class="faqustion-typeList">
                <nuxt-link :to="typePath(item, index)" :title="item.name" v-for="(item, index) in qustionType"
                  :class="{ comactive: type == item.type }" :key="item.id" class="faqustion-type-item">
                  {{ item.name }}
                </nuxt-link>

                <div class="tag-fillter">
                  <el-select v-model="fillterTag" size="small" multiple placeholder="过滤标签(最多3个)" remote filterable
                    :remote-method="tagsRemote" @focus="tagsDidClick" @change="tagsValueChange" :loading="tagloading"
                    :multiple-limit="2">
                    <el-option v-for="item in tagOptionList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                  <el-button type="primary" @click="fillterClick" size="small" plain>筛选</el-button>
                </div>
              </ul>
            </div>
            <div class="faqustion-subTags" v-if="hotTagList.length > 0">
              <div class="tag-title">热门标签:</div>
              <span class="tag-item" v-bind:class="{ selected: isSlectHotItem(item) }" @click="tagItemClick(item)"
                v-for="item in hotTagList" :key="item.id">
                <img :src="item.img" class="tag-image" v-if="item.img" alt="标签图片" />
                <span class="tag-name">{{ item.name }}</span>
              </span>
              <nuxt-link class="tag-more" :to="{ name: 'tags' }">
                更 多
                <i class="el-icon-arrow-right"></i>
              </nuxt-link>
            </div>
            <div class="questions_tab_con">
              <ul class="faqustion-subtypelist">
                <nuxt-link :to="sortPath(item)" v-for="item in sortList" :key="item.path"
                  :class="{ comactive: sort == item.path }" class="faqustion-subtype-item">
                  <span :title="item.name">
                    {{ item.name }}
                  </span>
                </nuxt-link>
              </ul>
            </div>
            <div class="questions_detail_con">
              <div class="nodata-warper" v-if="list.length == 0">
                <img class="nodata-image-tips" src="https://img.redskt.com/asset/img/nodata.png" alt="空数据提示" />
                <div>
                  <span>暂时没有数据哦，赶紧抢沙发吧</span>
                </div>
              </div>
              <div v-for="item in list" :key="item.qid" class="question_list">
                <div class="answer_title">
                  <nuxt-link :to="'/faquestion/detail/' + item.qid" class="header">
                    {{ item.title }}
                    <div class="ui red label horizontal">顶</div>
                    <div class="ui orange label horizontal">热</div>
                    <div class="ui red label horizontal fix" v-if="item.state == 9">
                      已解决
                    </div>
                  </nuxt-link>
                </div>

                <div class="description" v-html="item.content"></div>

                <div class="extra question-tags" v-if="item.tags">
                  <nuxt-link :to="'/tags/' + tag.id" class="ui horizontal basic label popup-tag" target="_blank"
                    v-for="tag in item.tags" :key="tag.id">
                    <img :src="tag.img" v-if="tag.img" alt="标签图标" />{{
                      tag.name
                    }}
                  </nuxt-link>
                </div>

                <div class="q_time">
                  <span>{{ item.gmtCreate }}来自</span>
                  <nuxt-link :to="'/user/' + item.uid + '/blog'" class="user_name" target="_blank">
                    {{ item.nickname }}
                  </nuxt-link>
                  <b>
                    悬赏
                    <a href="javascript:;" title="个人悬赏">{{ item.price }}C</a>
                  </b>
                  <nuxt-link :to="'/faquestion/' + item.qid" class="answer_num" title="问题回答数量">
                    <span>{{ item.reply }}</span>
                    <p class="anser-lable">回答</p>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
          <div class="clearnfloat"></div>
        </div>
      </section>
    </div>
  </section>
</template>

<script>
import "~/assets/css/askindex.css";

export default {
  data() {
    return {
      tagListRequest: false,
      tagOptionList: [],
      tagList: [],
      selectTag: [],
      fillterTag:[],
      selectType: "",
      tagloading: false,
      activeIndex: "1",
      typeIndex: 0,
      descrb:
        "开源实践问答，秉承有问必答的理念。对每一个问题细心维护，让您能用最短的时间获取最好的答案,是一个真正务实，能解决问题的社区。"
    };
  },

  head() {
    return {
      title: this.getTitle(),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: "技术问答,技术答疑,生活问题,我问你答，开源实践问答"
        },
        {
          hid: "description",
          name: "description",
          content: this.descrb
        },
        {
          hid: "og:description",
          content: this.descrb
        }
      ]
    };
  },

  async asyncData({ params, error, app }) {
    var type = "";
    var sort = "";
    if (params.type != undefined) {
      type = params.type;
    }
    if (params.sort != undefined) {
      sort = params.sort;
    }
    const response = await app.$axios.$post("/home/eduask/questionlist", {
      type: type,
      tag: "",
      sort: sort
    });
    return {
      list: response.data.list ? response.data.list : [],
      qustionType: response.data.qustionType,
      sortList: response.data.sortList,
      hotTagList: response.data.tagList,
      type: type ? type : response.data.qustionType[0].type,
      sort: sort ? sort : response.data.sortList[0].path,
      params: params
    };
  },
  mounted() {
    var sort = this.sort;
    var type = this.type;

    window.console.log(
      "type=" + this.type + " | tag = " + this.tag + " | sort = " + this.sort
    );

    window.console.log(this.params);
  },

  computed: {
    // 计算属性的 getter
    typePath() {
      return function (item, index) {
        if (index == 0) {
          return "/faquestion";
        }
        return "/faquestion/" + item.type;
      };
    },

    sortPath() {
      return function (item) {
        if (this.type != undefined) {
          return "/faquestion/" + this.type + "/" + item.path;
        }
        return "/faquestion/" + item.path;
      };
    },
    tagPath() {
      return function (item) {
        if (this.type != undefined) {
          return "/faquestion/" + this.type + "/" + item.path;
        }
        return "/faquestion/" + item.path;
      };
    }
  },

  methods: {
    getTitle() {
      if (!this.type) {
        return "开源实践问答 - 有问必答的务实问答社区";
      }
      var typeString = "";
      if (this.type && this.qustionType) {
        for (var j = 0; j < this.qustionType.length; j++) {
          if (this.qustionType[j].type == this.type) {
            typeString = this.qustionType[j].name;
            break;
          }
        }
      }

      var tagString = this.tag ? this.tag + " - " : "";
      var srotString = "";
      if (this.sort && this.sortList) {
        for (var j = 0; j < this.sortList.length; j++) {
          if (this.sortList[j].path == this.sort) {
            srotString = this.sortList[j].name;
            break;
          }
        }
      }
      return typeString + " - " + tagString + srotString + " - 开源实践问答";
    },

    getTypeItemId() {
      for (var j = 0; j < this.qustionType.length; j++) {
        if (this.qustionType[j].type == this.type) {
          return this.qustionType[j].id;
        }
      }
      return this.qustionType[0].id;
    },

    isSlectHotItem(item) {
      for (var j = 0; j < this.selectTag.length; j++) {
        if (item.id == this.selectTag[j]) {
          return true;
        }
      }
      return false;
    },

    tagItemClick(item) {
      if (this.isSlectHotItem(item)) {
        this.selectTag = this.selectTag.filter(function (element) {
          return element != item.id; // 排除已经选择的元素
        });
      } else {
        if (this.selectTag.length >= 3) {
           this.selectTag.shift();
        }
        this.selectTag.push(item.id); 
        var isAddOpt = true;
        for (var j = 0; j < this.tagOptionList.length; j++) {
          if (item.id == this.tagOptionList[j].id) {
             isAddOpt = false;
             break;
          }
        }
        if(isAddOpt) {
          this.tagOptionList.push(item);
        }
      }
      this.fillterTag = this.selectTag;
      this.requstQuestionList();
    },

    fillterClick() {
      this.selectTag = this.fillterTag;
      this.requstQuestionList();
    },
    
    requstQuestionList() {
      this.$axios.$post("/home/eduask/questionlist", {
        type: this.type,
        tag: this.selectTag,
        sort: this.sort
      }).then(response => {
        this.list = response.data.list ? response.data.list : [];
      });
    },

    tagsValueChange(value) {
      window.console.log(this.selectTag);
    },

    tagsDidClick() {
      if (!this.tagListRequest) {
        this.tagloading = true;
        this.$axios
          .$get("/home/tags/getAskTagList/" + this.getTypeItemId())
          .then(response => {
            this.tagListRequest = true;
            this.tagList = response.data.tagList;
            this.tagOptionList = this.tagList;
            this.tagloading = false;
          });
      }
    },
    tagsRemote(query) {
      if (query !== "") {
        if (!this.tagListRequest) {
          this.tagsDidClick();
          this.tagOptionList = this.tagList.filter(item => {
            return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        } else {
          this.tagloading = false;
          this.tagOptionList = this.tagList.filter(item => {
            return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }
      } else {
        this.options = [];
      }
    },

    jumpStartQuestion() {
      if (!this.$auth.loggedIn) {
        this.$message({
          message: "请登录以后在提问，正在跳转登录界面中！",
          type: "error",
          duration: 2000,
          onClose: () => {
            $nuxt.$router.push({
              name: "user-login"
            });
          }
        });
        return;
      }
      var item = window.localStorage.getItem("show_howto-ask");
      if (item) {
        this.$router.push({
          name: "faquestion-ask",
          query: {}
        });
      } else {
        window.localStorage.setItem("show_howto-ask", "1");
        this.$router.push({
          name: "faquestion-howtoask",
          query: {}
        });
      }
    }
  }
};
</script>
